import React, {useEffect, useState} from 'react';
import { Routes, Route, Link } from 'react-router-dom'
import './App.css';

declare global {
  interface Window {
    microApp: any
    __MICRO_APP_NAME__: string
    __MICRO_APP_ENVIRONMENT__: string
  }
}


function App() {
  const [data, setData] = useState({})
  const [value, setValue] = useState('')

  const handleInput = (e: any) => {
    setValue(e.target.value)
  }

  const handleSend = () => {
    window.microApp?.dispatch({
      value
    })
  }

  useEffect(() => {    
    window.microApp?.addDataListener((data: any) => {
      setData(data)
    })
  }, [])

  return (
    <div className="App">
      [react]: 这是来自主应用的数据：{JSON.stringify(data)}
      <div>
        <input type="text" value={value} onChange={handleInput}/>
        <button onClick={handleSend}>发送到主应用</button>
      </div>
      <div>
        <Link to="/page1">page1</Link>
        <Link to="/page2">page2</Link>
      </div>
      <div>
        <Routes>
          <Route path='' element={<div>
            
          </div>}></Route>
          <Route path='/page1' element={<div>
            page1
          </div>}></Route>
          <Route path='/page2' element={<div>
            page2
          </div>}></Route>
        </Routes>
      </div>
    </div>
  );
}

export default App;
